<template>
    <el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">

            <div class="card-panel" @click="handleClockData()">
                <div class="card-panel-icon-wrapper icon-people">
                    <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        打卡人数
                    </div>
                    <count-to :start-val="0" :end-val="137" :duration="2600" class="card-panel-num" />
                </div>
            </div>

        </el-col>


        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="handleMessageData()">
                <div class="card-panel-icon-wrapper icon-message">
                    <svg-icon icon-class="message" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        消息通知
                    </div>
                    <count-to :start-val="0" :end-val="28" :duration="3000" class="card-panel-num" />
                </div>
            </div>
        </el-col>



        <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">
            <div style="display: flex;" class="card-panel">
                <div style="width: 20%;padding-top: 15px;padding-left: 30px;">
                    <div class="addAgentBox"
                        :style="{ backgroundColor: isHovered ? 'rgb(249, 213, 177)' : 'transparent' }">
                        <!-- <h3>添加代办人</h3> -->
                        <img class="addAgentIcon" :src="isHovered ? hoverImage : defaultImage" width="50px"
                            :style="{ backgroundColor: isHovered ? 'rgb(249, 213, 177)' : 'transparent' }" height="50px"
                            alt="" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @click="AgentAdd()">
                    </div>

                </div>
                <div
                    style="width: 70%; display: flex; justify-content: center; align-items: center; flex-direction: column;">
                    <h2 v-if="isShowAgent == false">点击左侧图标添加代理人</h2>
                    <el-descriptions v-else border>
                        <el-descriptions-item :rowspan="1" :width="80" label="Photo" align="center">
                            <el-image style="width: 50px; height: 50px"
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        </el-descriptions-item>
                        <el-descriptions-item label="姓名">{{ agentInfo.username }}</el-descriptions-item>
                        <el-descriptions-item label="部门">{{ agentInfo.departmentName }}</el-descriptions-item>
                        <el-descriptions-item :rowspan="2" label="代办时间">5：00</el-descriptions-item>
                        <el-descriptions-item label="员工号">{{ agentInfo.numid }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div style="width: 10%; height: 100px; display: flex; justify-content: center; align-items: center;">
                    <el-button type="warning" @click="AgentDel()"
                        style="width: 50px; height: 100px; writing-mode: vertical-rl; text-align: center;" plain>
                        终止代办
                    </el-button>
                </div>
            </div>
        </el-col>
    </el-row>

    <!-- 打卡统计弹窗 -->
    <el-dialog v-model="clockDialog" title="打卡统计" width="1000" :before-close="clockDialogClose">
        <div style="width: 900px; height: 500px;margin-left: 40px;">
            <div ref="TimeAnalysisChart" style="width: 900px; height: 500px"></div>
        </div>
        <div style="width: 900px; height: 50px;margin-left: 40px; ">
            <h3>一共打卡人数：{{ recodeUserSum }}/148</h3>
            
        </div>
    </el-dialog>

    <!-- 消息列表弹窗 -->
    <el-dialog v-model="messageDialog" title="消息列表" width="1000" :before-close="handleClose">
        <div style="display: flex;">
            <div style="width: 490px; height: 500px;  overflow-y: auto; margin-right: 10px;"> <!-- 消息列表 -->
                <el-timeline style="max-width: 400px">
                    <el-timeline-item v-for="(message, index) in messages" :key="index" timestamp="2018/4/12"
                        placement="top" @click="selectMessage(message)">
                        <el-card>
                            <h4>{{ message.title }}</h4>
                            <p>{{ message.timestamp }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div
                style="background-color: rgb(243, 243, 243); border-radius: 10px; width: 480px; height: 500px; padding: 20px; overflow-y: auto;">
                <!-- 点击消息列表后 显示详细内容 -->
                <h2>消息详细信息:</h2>
                <p v-if="selectedMessage" class="styled-paragraph">
                <p>{{ selectedMessage.content }}</p>
                <p style=" text-align: right; padding-right: 10px; ">{{ selectedMessage.timestamp }}</p>
                </p>
                <p v-else>请点击左侧消息查看详情。</p>
                <el-button v-if="selectedMessage" type="success" @click="markAsRead">
                    已读
                </el-button>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="messageDialog = false">取消</el-button>
                <el-button type="primary" @click="messageDialog = false">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 添加代办人弹窗 -->
    <el-dialog v-model="agentDialog" title="添加代理人" width="500">

        <el-form :model="searchAgentModel" label-width="80px" :rules="rules" ref="agentFormRef">
            <el-form-item label="姓名" prop="username">
                <el-input v-model="searchAgentModel.username" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="部门" prop="departmentName">
                <el-select v-model="searchAgentModel.departmentName" placeholder="请选择部门">
                    <el-option v-for="department in departments" :key="department.value" :label="department.label"
                        :value="department.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工号" prop="numid">
                <el-input v-model="searchAgentModel.numid" placeholder="请输入员工号" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="submitSearchAgent">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetSearchAgent">重置</el-button>
                <div style="width: 210px; padding-top: 7px; padding-left: 20px;">
                    <img v-if="logoRef === 1" src="@/assets/logo/logot.png"
                        style="margin-left: 150px; width: 40px; height: 40px;" />
                    <img v-else-if="logoRef === 2" src="@/assets/logo/logof.png"
                        style="margin-left: 150px; width: 40px; height: 40px;" />
                    <p v-else>请搜索代办人...</p>
                </div>
            </el-form-item>
        </el-form>




        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetSearchAgentBtn()">取消</el-button>
                <el-button type="primary" @click="agentAddSubmit()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>





</template>

<script setup>
import { CountTo } from 'vue3-count-to';
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserByNumIdAndDN } from '@/api/personal/user'


//--------------------------------------------------签到统计start--------------------------------------------------
import { getUserRecord } from '@/api/personal/user'
import * as echarts from 'echarts';
const TimeAnalysisChart = ref(null);
let myChart = null;
const clockDialog = ref(false)

const recodeUserData = ref([])
const recodeUserSum = ref(0)
const recodeUserCountEcharts = ref([])
//点击打卡统计信息
const handleClockData = () => {
    getUserRecord().then(res => {
        recodeUserData.value = res.data
        console.log(recodeUserData.value)
        countRecordsInIntervals()
    })
    clockDialog.value = true
}


const countRecordsInIntervals = () => {
    // 初始化一个数组，每个元素代表一个10分钟区间的计数  
    const intervals = Array(13).fill(0); // 8:00-8:10, 8:10-8:20, ..., 8:50-9:00  
    // 遍历数据，统计每个区间的记录数  
    recodeUserData.value.forEach(record => {
        if (record.recordTime) {
            // 将时间转换为分钟，这里假设recordTime是"HH:MM"格式  
            const [hour, minute] = record.recordTime.split(':').map(Number);
            const totalMinutes = hour * 60 + minute;
            // 只统计7:00到9:00（即420分钟到540分钟）之间的数据  
            if (totalMinutes >= 420 && totalMinutes < 540) {
                // 计算区间索引，注意这里要减去420并除以10，然后取整数部分  
                const intervalIndex = Math.floor((totalMinutes - 420) / 10);
                // 由于数组是从0开始的，而我们的时间区间是从7:00开始的，所以这里的index是有效的  
                if (intervalIndex >= 0 && intervalIndex < intervals.length) {
                    intervals[intervalIndex]++;
                }
            }
        }
    });
    recodeUserSum.value = intervals.reduce((sum, count) => sum + count, 0);  
    // 将统计结果赋值给 timeIntervals  
    recodeUserCountEcharts.value = intervals;
};

const initChart = () => {
    myChart = echarts.init(TimeAnalysisChart.value);
    const option = {
        title: {
            text: '打卡时间分析图表',
            subtext: '10分钟持续打卡人数'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // prettier-ignore
            data: ['07:00', '07:10', '07:20', '07:30', '07:40', '07:50', '08:00', '08:10', '08:20', '08:30', '08:40', '08:50', '09:00']

        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}人 '
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [
                {
                    lte: 6,
                    color: 'green'
                },
                {
                    gt: 6,
                    lte: 8,
                    color: 'red'
                },
                {
                    gt: 8,
                    lte: 14,
                    color: 'green'
                },
                {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                },
                {
                    gt: 17,
                    color: 'green'
                }
            ]
        },
        series: [
            {
                name: '打卡人数',
                type: 'line',
                smooth: true,
                // prettier-ignore
                data: recodeUserCountEcharts.value,
                markArea: {
                    itemStyle: {
                        color: 'rgba(255, 173, 177, 0.4)'
                    },
                    data: [
                        [
                            {
                                name: '正常区间',
                                xAxis: '07:30'
                            },
                            {
                                xAxis: '08:00'
                            }
                        ],
                        [
                            {
                                name: '迟到区间',
                                xAxis: '08:20'
                            },
                            {
                                xAxis: '09:00'
                            }
                        ]
                    ]
                }
            }
        ]
    };

    myChart.setOption(option);
}


const clockDialogClose = () => {
    // 当模态框关闭时，销毁 ECharts 实例
    if (myChart !== null) {
        myChart.dispose();
    }
    clockDialog.value = false;
};

onMounted(() => {
    // 使用 nextTick 确保 DOM 元素已经渲染
    nextTick(() => {
        if (clockDialog.value) {
            console.log('DOM 元素已渲染，可以初始化图表---------------- ');
            initChart();
        }
    });
});

watch(clockDialog, (newValue) => {
    if (newValue) {
        console.log('clockDialog = true，可以初始化图表---------------- ');
        setTimeout(() => {
            initChart();
        }, 500);

    } else {
        if (myChart !== null) {
            myChart.dispose();
        }
    }
});





//--------------------------------------------------消息代码start--------------------------------------------------
const messageDialog = ref(false)
//模拟数据
const messages = ref([
    {
        msgid: 1001,
        title: '审批通知',
        timestamp: '2018/4/12 20:46',
        content: '尊敬的员工，您提交的项目审批申请已通过审核。经过审核小组的仔细评估，我们认为您的项目方案符合公司的发展方向和战略目标。请在接下来的工作中按照审批意见进行必要的调整，并在一周内提交修改后的方案，以便我们能尽快推进项目进程。感谢您的配合与努力！如有任何疑问，请随时联系审批部门。'
    },
    {
        msgid: 1002,
        title: '系统提醒',
        timestamp: '2018/4/13 10:30',
        content: '亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。亲爱的用户，系统将在本周末进行例行维护，具体时间为4月14日晚上10点至11点。维护期间，您可能会发现部分功能不可用，例如数据上传和报告生成等。为避免影响您的工作，请提前做好相关准备，并在维护完成后再进行操作。感谢您的理解与支持，如果您在使用过程中遇到任何问题，请及时反馈给技术支持团队。'
    },
    {
        msgid: 1003,
        title: '会议通知',
        timestamp: '2018/4/14 09:00',
        content: '请各位同事参加定于2018年4月15日的部门会议。会议将于上午10点在3楼会议室举行，预计持续约一个小时。会议议程包括项目进展汇报、未来计划以及团队协作的讨论。请确保准时到达，并准备好相关材料，以便能有效地进行交流与讨论。若无法参会，请提前告知您的直接主管。期待大家的积极参与！'
    },
    {
        msgid: 1004,
        title: '节假日安排',
        timestamp: '2018/4/15 11:15',
        content: '根据公司安排，五一假期从4月29日至5月1日放假，4月28日（周六）为调休上班日。请大家合理安排工作进度，确保节前任务的完成。同时，假期期间请注意自身安全，妥善规划出行及活动，尽量避免高风险场所。祝大家假期愉快，充分享受与家人和朋友的美好时光！'
    },
    {
        msgid: 1005,
        title: '培训通知',
        timestamp: '2018/4/16 14:30',
        content: '我们将在4月20日进行新员工培训，培训内容包括公司文化、岗位职责及相关流程等。这次培训将帮助新员工更快融入团队，了解公司的运作模式。请各部门提前安排好时间，确保新员工能够顺利参加，并给予必要的支持与指导。培训结束后，我们将进行问答环节，请大家积极参与并提出问题。'
    },
    {
        msgid: 1006,
        title: '系统维护',
        timestamp: '2018/4/17 16:00',
        content: '系统将在4月18日晚上10点至12点进行维护。在此期间，部分系统功能将暂时不可用，包括数据查询和信息提交等。请大家提前做好工作安排，以免影响正常业务。维护完成后，我们将尽快恢复所有服务。如有紧急情况，请直接联系技术支持团队。感谢大家的理解与配合！'
    },
    {
        msgid: 1007,
        title: '健康检查',
        timestamp: '2018/4/18 08:00',
        content: '本周五将进行年度健康检查，所有员工请按时到达指定地点进行检查。此次健康检查包括常规体检（身高、体重、血压等）、血液检测及心理健康评估。请大家务必重视健康状况，保持良好的生活习惯，提前准备相关资料以便顺利完成检查。如果您有特殊健康状况，请提前告知医务人员。'
    },
    {
        msgid: 1008,
        title: '员工生日会',
        timestamp: '2018/4/19 15:00',
        content: '本月生日的员工请于4月25日参加生日会，地点设在员工休息室，时间为下午3点。届时将有蛋糕、小礼物和轻松的互动游戏。我们鼓励大家在会上分享自己的心愿与感受，增进彼此之间的了解与合作。期待与大家共同庆祝这一特别的时刻，让我们一起创造美好的回忆！'
    },
]);
const selectedMessage = ref(null); // 用于存储选中的消息

const handleMessageData = (type) => {
    //开启消息列表模态框并显示所有未读消息
    messageDialog.value = true
    console.log(type)
}
const selectMessage = (message) => {
    selectedMessage.value = message; // 更新选中的消息
};
const markAsRead = () => {
    console.log(selectedMessage.value.msgid)
    if (selectedMessage.value) {
        alert(`"${selectedMessage.value.title}" 已标记为已读.`);
    }
};
//--------------------------------------------------消息代码stop--------------------------------------------------
import defaultImage from '@/assets/logo/addpng04.png'; // 默认图片路径
import hoverImage from '@/assets/logo/addpng05.png'; // 悬停时显示的图片路径
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
import { el } from 'element-plus/es/locales.mjs';
const isExist = ref(false);
const isShowAgent = ref(false);
const logoRef = ref(0);
const agentInfo = reactive({
    username: '',
    departmentName: '',
    numid: ''
}); // 代理人数据
// const searchAgent = {

// }
const rules = {
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, message: '名字长度不能少于2个字符', trigger: 'blur' }
    ],
    departmentName: [
        { required: true, message: '请选择部门', trigger: 'change' }
    ],
    numid: [
        { required: true, message: '请输入员工号', trigger: 'blur' },
        { pattern: /^[0-9]{12}$/, message: '员工号必须是12位数字', trigger: 'blur' }
    ]
};

const departments = [
    { value: '人力资源部', label: '人力资源部' },
    { value: '技术部', label: '技术部' },
    { value: '市场部', label: '市场部' }
];

const searchAgentModel = reactive({
    username: '',
    departmentName: '',
    numid: ''
});
const agentDialog = ref(false) // 代理人弹窗
const isHovered = ref(false); // 用于记录鼠标是否悬停
const onMouseOver = () => {
    isHovered.value = true; // 鼠标悬停
};
const onMouseLeave = () => {
    isHovered.value = false; // 鼠标离开
};
const AgentAdd = () => {
    console.log('点击了代理人添加')
    if (isShowAgent.value == true) {


        ElMessage({
            message: '已有代理人',
            type: 'warning',
            plain: true,
        })

    } else {
        agentDialog.value = true
    }

}
const submitSearchAgent = () => {
    console.log('点击了搜索代理人');
    agentFormRef.value.validate((valid) => {
        if (valid) {
            alert('提交成功!');
            // 在这里添加你的搜索逻辑  
            //发送请求查询
            getUserByNumIdAndDN(searchAgentModel).then(res => {
                console.log(res);
                if (res.data == 1) {
                    isExist.value = true;
                    logoRef.value = 1

                } else {
                    isExist.value = false;
                    logoRef.value = 2
                }
            })


        } else {
            console.log('error submit!!');
            return false;
        }
    });


    if (isExist.value == true) {

        agentInfo.username = searchAgentModel.username
        agentInfo.departmentName = searchAgentModel.departmentName
        agentInfo.numid = searchAgentModel.numid
    } else {
        agentInfo.username = ''
        agentInfo.departmentName = ''
        agentInfo.numid = ''

    }
}
//重置收索数据模型
const resetSearchAgent = () => {
    logoRef.value = 0
    searchAgentModel.username = '';
    searchAgentModel.departmentName = '';
    searchAgentModel.numid = '';
};

const resetSearchAgentBtn = () => {
    logoRef.value = 0
    agentDialog.value = false
    searchAgentModel.numid = ''
    searchAgentModel.departmentName = ''
    searchAgentModel.username = ''
}
const agentAddSubmit = () => {
    if (isExist.value == true) {
        isShowAgent.value = true
    } else {
        isShowAgent.value = false
    }
    logoRef.value = 0
    agentDialog.value = false
    searchAgentModel.numid = ''
    searchAgentModel.departmentName = ''
    searchAgentModel.username = ''
}
const AgentDel = () => {
    console.log('点击了代理人删除');
    ElMessageBox.alert('确认要删除代办人？', 'info', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        showCancelButton: true, // 显示取消按钮
        callback: (action) => {
            if (action === 'confirm') { // 只有在确认时才执行下面的代码
                ElMessage({
                    type: 'info',
                    message: "取消成功",
                });
                agentInfo.value = null; // 确认后设置为null
                isShowAgent.value = false;
            } else {
                ElMessage({
                    type: 'info',
                    message: '操作已取消',
                });
            }
        },
    });
};
//--------------------------------------------------添加代办人结束--------------------------


</script>



<style lang="scss" scoped>
.addAgentBox {
    width: 80px;
    height: 80px;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    border-radius: 5px;


}



.styled-paragraph {
    letter-spacing: 0.5px;
    /* 字间距 */
    line-height: 1.6;
    /* 行间距 */
    text-indent: 2em;
    /* 首行缩进 */
}


.panel-group {
    margin-top: 18px;

    .card-panel-col {
        margin-bottom: 32px;
    }

    .card-panel {

        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-people {
                background: #40c9c6;
            }

            .icon-message {
                background: #36a3f7;
            }

            .icon-money {
                background: #f4516c;
            }

            .icon-shopping {
                background: #34bfa3
            }
        }

        .icon-people {
            color: #40c9c6;
        }

        .icon-message {
            color: #36a3f7;
        }

        .icon-money {
            color: #f4516c;
        }

        .icon-shopping {
            color: #34bfa3
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 48px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 26px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 20px;
            }
        }
    }
}

@media (max-width:550px) {
    .card-panel-description {
        display: none;
    }

    .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
            display: block;
            margin: 14px auto !important;
            float: none !important;
        }
    }
}
</style>
